<template>
  <div class="table-container">
    <div class="table-title">销售侧明细</div>
    <div class="formula-detail">
      <el-collapse v-model="activeNames" class="formula-collapse" accordion @change="handleChange">
        <el-collapse-item title="公式详情" name="1">
          <div class="formula">差额电费 = 实际电费 - 预测电费</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- <el-table ref="tableRef" :data="tableData" key="itemKey2" border style="width: 100%">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="cat" label="分类" width="120"></el-table-column>
      <el-table-column prop="level" label="电压等级" width="120"></el-table-column>
      <el-table-column label="预测数">
        <el-table-column prop="fore_electric" label="电量" width="120">
          <template #default="scope">
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.fore_electric"
              size="small"
            ></el-input>
            <span v-show="!scope.row.isEdit || scope.row.level === '小计'">
              {{ getTotalElectric(scope.$index, scope.row) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="fore_price" label="单价">
          <template #default="scope">
            <el-input
              v-show="scope.row.priceEdit"
              v-model="scope.row.fore_price"
              size="small"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fore_cost" label="电费"></el-table-column>
      </el-table-column>
      <el-table-column label="实际发生数">
        <el-table-column prop="actual_electric" label="电量" width="120">
          <template #default="scope">
            <el-input v-model="scope.row.actual_electric" size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="actual_price" label="单价">
          <template #default="scope">
            <el-input
              v-show="scope.row.priceEdit"
              v-model="scope.row.actual_price"
              size="small"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="actual_cost" label="电费"></el-table-column>
      </el-table-column>
      <el-table-column label="差额">
        <el-table-column prop="dif_electric" label="电量" width="120">
          <template #default="scope">
            <span>{{ getDifElectric(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dif_price" label="单价">
          <template #default="scope">
            <span>{{ getDifPrice(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dif_cost" label="电费">
          <template #default="scope">
            <span>{{ getDifCost(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
    </el-table> -->
    <table class="complex-table-wrapper" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th colspan="1" rowspan="2" width="5%">序号</th>
          <th colspan="2" rowspan="2" width="8%">分类</th>
          <th colspan="1" rowspan="2" width="12%">电压等级</th>
          <th colspan="3" width="20%">预测数</th>
          <th colspan="3" width="20%">实际发生数</th>
          <th colspan="3" width="20%">差额</th>
          <th colspan="1" rowspan="2" width="15%">备注</th>
        </tr>
        <tr>
          <th width="6.66%">电量</th>
          <th width="6.66%">单价</th>
          <th width="6.66%">电费</th>
          <th width="6.66%">电量</th>
          <th width="6.66%">单价</th>
          <th width="6.66%">电费</th>
          <th width="6.66%">电量</th>
          <th width="6.66%">单价</th>
          <th width="6.66%">电费</th>
        </tr>
      </thead>
      <tbody>
        <!-- row: 当前行数据， index 当前行索引 -->
        <tr v-for="(row, index) in tableData">
          <td v-if="index < tableData.length - 2">{{ index + 1 }}</td>
          <!-- 当前列key为属性名 -->
          <template v-for="key in columnOrder">
            <template v-if="row.hasOwnProperty(key)">
              <td
                :label="key"
                :rowspan="handleRowSpan({ row, key, index })"
                :colspan="handleColspan({ row, key, index })"
                v-bind="handleStyle({ row, key, index })"
              >
                <template v-if="key === 'fore_electric'">
                  <el-input v-show="row.isEdit" v-model="row.fore_electric" size="small"></el-input>
                  <span v-show="!row.isEdit || row.level === '小计'">
                    {{ getTotalElectric(index, row) }}
                  </span>
                </template>
                <template v-else-if="key === 'fore_price'">
                  <el-input v-show="row.priceEdit" v-model="row.fore_price" size="small"></el-input>
                </template>
                <template v-else-if="key === 'actual_electric'">
                  <el-input v-model="row.actual_electric" size="small"></el-input>
                </template>
                <template v-else-if="key === 'actual_price'">
                  <el-input
                    v-show="row.priceEdit"
                    v-model="row.actual_price"
                    size="small"
                  ></el-input>
                </template>
                <template v-else-if="key === 'dif_electric'">
                  <span>{{ getDifElectric(row) }}</span>
                </template>
                <template v-else-if="key === 'dif_price'">
                  <span>{{ getDifPrice(row) }}</span>
                </template>
                <template v-else-if="key === 'dif_cost'">
                  <span>{{ getDifCost(row) }}</span>
                </template>
                <template v-else>
                  {{ row[key] || '-' }}
                </template>
              </td>
            </template>
          </template>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
const columnOrder: any = [
  'index',
  'cat',
  'smallCat',
  'subCat',
  'level',
  'totalRemark',
  'fore_electric',
  'fore_price',
  'fore_cost',
  'actual_electric',
  'calcFormula',
  'actual_price',
  'actual_cost',
  'dif_electric',
  'dif_price',
  'dif_cost',
  'remark',
];
/**
 * 处理合并单元格的colspan
 * @param config { row: any, key: string, index: number}
 */
function handleColspan(config: any): any {
  if (config.row.cat === '工商业用电' && config.key === 'cat') {
    return 1;
  }
  const map: any = {
    cat: 3,
    totalRemark: 2,
    smallCat: 2,
    calcFormula: 6,
  };
  return map[config.key];
}
/**
 * 处理合并单元格的rowspan
 * @param config { row: any, key: string, index: number}
 */
function handleRowSpan(config: any): any {
  const map: any = {
    smallCat: 2,
    index: 2,
  };
  if (config.row.cat === '工商业用电' && config.key === 'cat') {
    return 13;
  }
  if (config.row.subCat === '单一制' && config.key === 'subCat') {
    return 4;
  }
  if (config.row.subCat === '两部制' && config.key === 'subCat') {
    return 5;
  }
  return map[config.key];
}
/**
 * 处理单元格的样式
 * @param config { row: any, key: string, index: number}
 */
function handleStyle(config: any): any {
  if (
    config.key === 'subCat' &&
    (config.row.subCat === '单一制' || config.row.subCat === '两部制')
  ) {
    return {
      style: {
        width: '10%',
      },
    };
  }
  if (config.key == 'subCat' && config.row.subCat === '尖峰收益') {
    return {
      style: {
        textAlign: 'left',
      },
    };
  }
  if (
    config.key === 'totalRemark' &&
    (config.row.totalRemark === '1、国内电源保障电量' ||
      config.row.totalRemark === '2、购大网市场化电量')
  ) {
    return {
      style: {
        'font-size': '12px',
        'text-align': 'left',
      },
    };
  }
}
const tableData = reactive<any>([
  {
    cat: '居民生活用电',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    cat: '农业生产用电',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    cat: '农业排灌用电',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    cat: '工商业用电',
    subCat: '单一制',
    level: '不满1千伏',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    level: '1-10千伏',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    level: '35千伏',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    level: '小计',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: false,
  },
  {
    subCat: '两部制',
    level: '1-10千伏',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    level: '35千伏',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    level: '110千伏',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    level: '220千伏',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    level: '小计',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: false,
  },
  {
    totalRemark: '小计',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: false,
  },
  {
    totalRemark: '其中：市场化交易',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: false,
  },
  {
    totalRemark: '1.网内电源保障电量',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: false,
  },
  {
    totalRemark: '2.购大网市场化电量',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: false,
  },

  {
    cat: '上大网电量',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
    priceEdit: true,
  },
  {
    cat: '县间交易送出',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: false,
  },
  {
    cat: '线损电量',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    cat: '合计',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    actual_price: '',
    actual_cost: '',
    dif_electric: '',
    dif_price: '',
    dif_cost: '',
    remark: '',
    isEdit: true,
  },
  {
    index: '新增',
    smallCat: '工商业分时损益',
    subCat: '封平谷损益',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    calcFormula: '峰段益＋平段益＋谷段损 峰段益＝（峰段电价－平段电价）× 峰段电量，以此类推',
    remark: '',
    isEdit: true,
  },
  {
    subCat: '尖峰收益',
    fore_electric: '',
    fore_price: '',
    fore_cost: '',
    actual_electric: '',
    calcFormula: '尖峰收益＝（尖峰电价－峰段电价）× 尖峰电量',
    remark: '',
    isEdit: true,
  },
]);

const activeNames = ref('1');
const handleChange = () => {};

const getDifElectric = (row: any) => {
  if (row.actual_electric && row.fore_electric) {
    return row.actual_electric - row.fore_electric;
  } else {
    return '-';
  }
};
const getDifPrice = (row: any) => {
  if (row.actual_price && row.fore_price) {
    return row.actual_price - row.fore_price;
  } else {
    return '-';
  }
};
const getDifCost = (row: any) => {
  if (row.actual_cost && row.fore_cost) {
    return row.actual_cost - row.fore_cost;
  } else {
    return '-';
  }
};
const getTotalElectric = (index: number, row: any) => {
  if (row.level === '小计') {
    let total = 0;
    for (let i = 0; i < index; i++) {
      total += tableData[i].fore_electric * 1;
    }
    return total;
  }
};
// const tableData = reactive<any>([
//   {
//     cat: '居民生活用电',
//     level: '',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: true,
//   },
//   {
//     cat: '农业生产用电',
//     level: '',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: true,
//   },
//   {
//     cat: '农业排灌用电',
//     level: '',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: true,
//   },
//   {
//     cat: '工商业用电',
//     subCat: '单一制',
//     level: '不满1千伏',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: true,
//   },
//   {
//     cat: '工商业用电',
//     subCat: '单一制',
//     level: '1-10千伏',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: true,
//   },
//   {
//     cat: '工商业用电',
//     subCat: '单一制',
//     level: '35千伏',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: true,
//   },
//   {
//     cat: '工商业用电',
//     subCat: '单一制',
//     level: '小计',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: false,
//   },

//   {
//     cat: '工商业用电',
//     level: '其中：市场化交易',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: false,
//   },
//   {
//     cat: '工商业用电',
//     level: '1.网内电源保障电量',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: false,
//   },
//   {
//     cat: '工商业用电',
//     level: '2.购大网市场化电量',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: false,
//   },

//   {
//     cat: '上大网电量',
//     level: '',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: true,
//     priceEdit: true,
//   },
//   {
//     cat: '县间交易送出',
//     level: '',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: false,
//   },
//   {
//     cat: '线损电量',
//     level: '',
//     fore_electric: '',
//     fore_price: '',
//     fore_cost: '',
//     actual_electric: '',
//     actual_price: '',
//     actual_cost: '',
//     dif_electric: '',
//     dif_price: '',
//     dif_cost: '',
//     remark: '',
//     isEdit: true,
//   },
// ]);
</script>

<style lang="scss" scoped>
.formula-detail {
  display: flex;
  justify-content: flex-end;
}
.formula-collapse {
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding-left: 10px;

  :deep(.el-collapse-item__header) {
    color: #4080ff;
    background-color: transparent;
  }
}
.formula {
  padding: 5px;
}
.complex-table-wrapper {
  background: #ffffff;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
  width: 100%;
  thead {
    background-color: #f5f7fa;
    color: #909399;
    font-size: 14px;
    font-weight: 600;
  }
  tbody {
    color: #606266;
    font-size: 14px;
    tr {
      td:first-child {
        text-align: center;
      }
    }
  }
  td,
  th {
    padding: 8px 12px;
  }
  td,
  th,
  tr {
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
  }
}
</style>
